<template>
  <div class="ProgressSteps">
     <div class="nums">
     <ProgressStep v-for="(item,index) in 4" :key="index" :num="index+1" :count = "count" :show="index<3"></ProgressStep>
     </div>
     <div class="btn">
      <button class="btn1" @click="prew" :disabled="count==1" :class="count==1?'actives':''">上一个</button>
      <button class="btn1" @click="next" :disabled="count==4" :class="count==4?'actives':''">下一个</button>
     </div> 
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ProgressStep from '../components/ProgressStep.vue'
const count = ref(1)
const prew = () =>{
  if(count.value<=1){
    count.value=1
  }else{
    count.value--
  }
}
const next = () =>{
  if(count.value>=4){
    count.value=4
  }else{
    count.value++
  }
}
</script>

<style scoped>
.ProgressSteps{
 padding: 20px 400px;
}
.nums{
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn{
  display: flex;
  justify-content: center;
}
.btn1{
  background-color:rgb(24, 117, 114);
  color: #fff;
  border: 0;
  border-radius: 4px;
  margin-right: 20px;
}
.actives{
  background-color:rgb(218, 217, 220) ;
  border: 0;
}
</style>